<script setup lang="ts">
	import { ref, unref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { route } from '@/uni_modules/uview-plus'
	interface RouteParams {
		id : string,
		name : string,
		receive_money : string
		balance : string
		should_payment : string
	}
	const routeParams = ref<RouteParams>({
		id: '',
		name: '',
		receive_money: '',
		balance: '',
		should_payment: ''
	})
	onLoad((options) => {
		routeParams.value = options as RouteParams
		console.log(routeParams.value, '2131')
	})
	// 欠款金额
	const toStoreDetail = () => {
		route({
			url: '/package_saleman/paymentPages/Repayment/index',
			params: {
				id: routeParams.value.id,
				name: routeParams.value.name,
				receive_money: routeParams.value.receive_money
			}
		})
	}
	// 预存款
	const toStore = () => {
		route({
			url: '/package_saleman/paymentPages/Received/index',
			params: {
				id: routeParams.value.id,
				name: routeParams.value.name,
				balance: routeParams.value.balance
			}
		})
	}
	// 账期结款
	const storeDetail = () => {
		route({
			url: '/package_saleman/paymentPages/AccountPeriod/index',
			params: {
				id: routeParams.value.id,
				name: routeParams.value.name,
				receive_money: routeParams.value.receive_money
			}
		})
	}
	const rangeTags = [{
		title: '全部',
		value: 0
	},{
		title: '今日',
		value: 1
	},{
		title: '近七日',
		value: 2
	},{
		title: '近30日',
		value: 3
	}]
	// 定义当前选中的标签
	const currentTag = ref(0);
	
	// 选择标签的函数
	const selectTag = (value: number) => {
	  currentTag.value = value;
	};
</script>

<template>
	<view class="content">
		<up-navbar title="收款" autoBack placeholder></up-navbar>
		<view class="content-header">
			<view class="header-card">
				<view style="display: flex;flex-direction: column;">
					<view style="display: flex;align-items: center;gap: 12rpx;">
						<view class="col-line"></view>
						<span>{{routeParams.store_name}}</span>
					</view>

					<span style="font-size: 18rpx;color: rgba(100, 101, 102, 1);">收款数据</span>
				</view>
				<view class="store-card">
					<image style="position: absolute;
					width: 240rpx;
					height:240rpx;
					right: 30rpx;
					top: 160rpx;" src="@/package_saleman/static/img/store.png" alt="" />
				</view>
			</view>
			<!-- <view class="header-text">账期：2024/12/31</view> -->
			<view class="header-line"></view>
			<view class="header-foot">
				<view class="foot-box">
					<view class="box-title">
						<img style="width: 30rpx;height: 30rpx;" 
						src="@/package_saleman/static/img/icon1.png" alt="" />
						<view class="foot-name">预存金额</view>
					</view>
					<view class="foot-text"> </view>
				</view>
				<view class="foot-box">
					<view class="box-title">
						<img style="width: 30rpx;height: 30rpx;" 
						src="@/package_saleman/static/img/icon2.png" alt="" />
						<view class="foot-name">欠款金额</view>
					</view>
					
					<view class="foot-text"> </view>
				</view>
				<view class="foot-box">
					<view class="box-title">
						<img style="width: 30rpx;height: 30rpx;" 
						src="@/package_saleman/static/img/icon3.png" alt="" />
						<view class="foot-name">账期欠款</view>
					</view>
					
					<view class="foot-text"> </view>
				</view>
				<view class="foot-box">
					<view class="box-title">
						<img style="width: 30rpx;height: 30rpx;" 
						src="@/package_saleman/static/img/icon4.png" alt="" />
						<view class="foot-name">应收金额</view>
					</view>
					
					<view class="foot-text"> </view>
				</view>
			</view>
		</view>
		<view class="content-middle">
			<view class="money">
				<view class="desc">
					<image style="width: 50rpx;height: 50rpx;" src="@/package_saleman/static/img/icon6.png" />
					去结欠款
				</view>
				<view class="desc">
					<image style="width: 50rpx;height: 50rpx;" src="@/package_saleman/static/img/icon8.png" />
					存预存款
				</view>
				<view class="desc">
					<image style="width: 50rpx;height: 50rpx;" src="@/package_saleman/static/img/icon7.png" />
					账期结款
				</view>
				
			</view>
				
		</view>
		<view class="content-main">
			<view class="main-header">
			    汇总明细
			    <view class="tag-container">
			      <!-- 循环渲染标签 -->
			      <view
			        v-for="tag in rangeTags"
			        :key="tag.value"
			        :class="{ tag: true, selected: currentTag === tag.value }"
			        @click="selectTag(tag.value)"
			      >
			        {{ tag.title }}
			      </view>
			    </view>
			  </view>
			<!-- <view class="main-footer">
				<view class="footer-right" @click="toStoreDetail()">
					<view class="right-img">
						<image style="width: 40rpx;height: 40rpx;" src="@/package_dealer/static/Home/home2.png">
						</image>
					</view>
					<text class="right-name">欠款金额</text>
				</view>
				<view class="footer-right" @click="toStore()">
					<view class="right-img">
						<image style="width: 40rpx;height: 40rpx;" src="@/package_dealer/static/Home/home3.png">
						</image>
					</view>
					<text class="right-name">预存款</text>
				</view>
				<view class="footer-right" @click="storeDetail()">
					<view class="right-img">
						<image style="width: 40rpx;height: 40rpx;" src="@/package_dealer/static/Home/home4.png">
						</image>
					</view>
					<text class="right-name">账期结款</text>
				</view>
			</view> -->
		</view>
	</view>
</template>


<style scoped lang="scss">
	.content {
		width: 100%;
		background: rgba(242, 243, 245, 1);
		padding-top: 30rpx;
		box-sizing: border-box;

		.content-header {
			width: 702rpx;
			height: auto;
			border-radius: 12rpx;
			// background: rgba(54, 116, 242, 1);
			background: url("/package_saleman/static/img/background.png") center;
			margin: 30rpx auto 0 auto;
			padding: 30rpx;
			box-sizing: border-box;
			color: #000;

			.header-card {
				// height: 120rpx;
				// background: url("/package_saleman/static/img/background.png") repeat fixed center;
				font-size: 28rpx;
				font-weight: 700;
				display: flex;
				justify-content: space-between;
				padding: 24rpx;

				// color: rgba(241, 245, 249, 1);
				.col-line {
					width: 6rpx;
					height: 24rpx;
					background: rgba(15, 127, 255, 1);
				}

				.store-card {
					// position: relative;
					// width: 90rpx;
					// height: 90rpx;
					// right: 240rpx;
					// bottom: 120rpx;
				}
			}

			.header-text {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.85);
				margin-top: 20rpx;
			}

			.header-line {
				width: 658rpx;
				height: 2rpx;
				background: rgba(255, 255, 255, 0.1);
				margin: 20rpx 0rpx;
			}

			.header-foot {
			    display: flex;
			    justify-content: space-between;
			    /* 设置允许换行 */
			    flex-wrap: wrap;
				gap: 2rpx;
			    .foot-box {
			        width: calc(50% - 10px); 
					display: flex;
					flex-direction: column;
					align-items: center;
					background: url("/package_saleman/static/img/backCard.png") center;
					padding: 10rpx 0;
					.box-title {
						display: flex;
						align-items: center;
						gap: 6rpx;
					}
			        .foot-name {
			            font-size: 24rpx;
			            font-weight: 500;
			            // color: rgba(255, 255, 255, 1);
			        }
			
			        .foot-text {
			            font-size: 28rpx;
			            font-weight: 700;
			            // color: rgba(255, 255, 255, 1);
			            margin-top: 10rpx;
			        }
			    }
			}
		}
		.content-middle {
			// margin-top: 36rpx;
			padding: 24rpx;
			.money {
				background-color: #fff;
			display: flex;
			height: 180rpx;
			justify-content: space-between;
			align-items: center;
			border-radius: 12rpx;
			padding: 0 81rpx;
			.desc {
				display: flex;
				flex-direction: column;
				gap: 12rpx;
				align-items: center;
			}
			}
			
		}
		.content-main {
			width: 100%;
			height: auto;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;

			.main-header {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			
			  .tag-container {
			    display: flex;
				font-size: 24rpx;
				color: rgba(155, 157, 158, 1);
			    .tag {
			      padding: 10rpx;
			      margin-left: 20rpx;
			      border-radius: 12rpx;
			      background-color: rgba(240, 240, 240, 1);
			      border: 1px solid rgba(240, 240, 240, 1);
			
			      &.selected {
			        background-color: rgba(15, 127, 255, 1);
			        border: 1px solid rgba(15, 127, 255, 1);
					color: #fff;
			      }
			    }
			  }
			}

			.main-footer {
				width: 702rpx;
				position: fixed;
				bottom: 80rpx;
				display: flex;
				justify-content: space-between;

				.footer-right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 218rpx;
					height: 80rpx;
					border-radius: 12rpx;
					background: rgba(245, 245, 245, 1);
					margin-right: 20rpx;

					.right-img {
						width: 40rpx;
						height: 40rpx;
						vertical-align: middle;
						margin-right: 20rpx;
					}

					.right-name {
						font-size: 28rpx;
						font-weight: 700;
						color: rgba(55, 131, 252, 1);
					}
				}

			}
		}
	}
</style>